<template>
  <div id="consumptionDetails">
    <div class="pageHead">
      <el-row>
        <el-col :span="12">
          <span>开始月份：</span>
          <el-date-picker v-model="listQuery.date" type="month" placeholder="开始月份" @change="getTableData" format="yyyy 年 MM 月" value-format="yyyy-MM"></el-date-picker>
        </el-col>
        <el-col :span="12">
          <div class="totalContent">
            <span class="totalItem">报税预扣合计：<span>{{ totalTaxReturns }}</span></span>
            <span class="totalItem">采集扣款金额：<span>{{ totalCollection }}</span></span>
            <span class="totalItem">合计：<span>{{ totalTotal }}</span></span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="pageMain">
      <el-table border :data="tableData" style="width: 100%" height="100%" v-loading='tableLoading' size='medium'>
        <el-table-column prop="ZtName" label="账套名称" align="left">
          <template slot-scope="scope">
            <span class="paddTd">{{scope.row.ZtName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="BXMoney" label="报税扣款金额" align="right">
          <template slot-scope="scope">
            <span class="paddTd">{{scope.row.BXMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报税详情">
          <el-table-column label="申报日期" align="center">
            <template slot-scope="scope">
              <el-table border :data="scope.row.TaxInfolist" class="innerTable">
                <el-table-column prop="Year" label="" sortable align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.Year + '-' + scope.row.Month}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="申报税种" align="center">
            <template slot-scope="scope">
              <el-table border :data="scope.row.TaxInfolist" class="innerTable">
                <el-table-column prop="TaxProjectName" label="申报税种" sortable align="center">
                  <template slot-scope="scope">
                    <span>{{scope.row.TaxProjectName}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="CJMoney" label="采集扣款金额" align="right">
          <template slot-scope="scope">
            <span class="paddTd">{{scope.row.CJMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SumMoney" label="合计" align="right">
          <template slot-scope="scope">
            <span class="paddTd">{{scope.row.SumMoney}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageFooter">
      <!--2020-1-19 | gz | 修改text内容 -->
      <p>备注：</p>
      <p>1.若每个账套每个月进行报税，则当月仅扣报税款,采集不扣款。<span style="margin-left: 35px;">2.若每个账套每个月仅进行采集,不报税,则当月仅扣采集款。</span><span style="margin-left: 35px;">3.不使用报税功能，每个账套采集扣费2元/月。</span></p>
      <p>4.小规模纳税人每个账套5元/月；一般纳税人每个账套12元/月。</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'consumptionDetails',
  data() {
    return {
      listQuery: {
        Year: '',
        Month: '',
        Serial: '000001',
        date: ''
      },
      tableData: [],
      tableLoading: false,
      totalTaxReturns: '暂无', // 报税合计
      totalCollection: '暂无', // 采集合计
      totalTotal: '暂无' // 总合计
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.common.userInfo
    })
  },
  methods: {
    getTableData() {
      let dateArr = this.listQuery.date.split('-');
      this.listQuery.Year = dateArr[0];
      this.listQuery.Month = dateArr[1];
      this.tableLoading = true;
      this.$api.systemManagement.GetTaxLog(this.listQuery).then(res => {
        let resData = res.data.Data.TaxList;
        this.tableData = resData;
        this.tableLoading = false;
        let sumObj = res.data.Data.Sum;
        this.totalTaxReturns = sumObj.BX;
        this.totalCollection = sumObj.CJ;
        this.totalTotal = sumObj.SumMoney;
      });
    },
    getCurryDate() {
      let now = new Date();
      let year = now.getFullYear(); // 得到年份
      let month = now.getMonth() + 1; // 得到月份
      this.listQuery.date = year + '-' + month;
      // this.getTableData()
    }
  },
  created() {
    this.getCurryDate();
  }
};
</script>

<style lang="less">
#consumptionDetails {
  .pageHead {
    padding-left: 15px;
    padding-right: 35px;
    .el-date-editor {
      width: 150px;
    }
    .totalContent {
      text-align: right;
      .totalItem {
        color: #333;
        margin-left: 35px;
        font-size: 12px;
        > span {
          color: #ff6737;
        }
      }
    }
  }
  .pageMain {
    height: calc(100% - 152px);
    box-shadow: 0px 0px 20px #d4dcf0;
    .el-table {
      thead {
        th {
          height: 50px;
          color: #87888c;
          background: #f7f8fc;
          font-size: 14px;
        }
      }
      tbody {
        .cell {
          padding: 0;
        }
        td {
          padding: 0;
          .paddTd {
            padding: 0 15px;
          }
          .iconfont {
            color: #999;
            &:hover {
              color: #39a4ed;
              cursor: pointer;
            }
          }
        }
      }
    }
    .innerTable {
      background-color: transparent;
      &::before {
        display: none;
      }
      thead {
        display: none;
      }
      td,
      tr {
        font-size: 14px;
        background-color: transparent;
        border: none;
      }
      tr {
        td {
          border-bottom: 1px solid #ebeef5;
          padding: 15px 0;
        }
        &:last-child td {
          border-bottom: none;
        }
      }
    }
  }
  .pageFooter {
    color: #fc4242;
    font-size: 12px;
    padding-left: 25px;
    line-height: 1.8;
    padding-top: 20px;
  }
}
</style>
